React.js framework allows us to create single-page applications (commonly referred to as SPA). A SPA is an application in which the pages do not reload for in-page actions like clicking a hyperlink or clicking a button.

The webpage transition is so quick that it’s difficult to notice when the DOM content changes, thus improving the application’s user experience.

In this tutorial, we will learn about framer motion and how it helps with page transitions.

To follow through with this article, the reader should have the following:

Framer motion is an animation library that helps us create animations. Its simplified API removes the complexities of animations.

It is an open-source, production-ready React motion library. Framer motion’s animations are used on over 99 percent of websites.

You can check out their website here to learn more about the library. You can also check out these other cool websites that are built with framer motion at awwards.

The motion component in the framer motion core API can be related to an HTML element. To understand them better, let’s build a project from scratch.

Open the terminal and navigate to the project folder to install the react boilerplate:

Before we proceed further, let’s delete some boilerplate files like App.css, App.test.js, Index.css, reportWebvitals.js, setupWebVitals.js.

Locate App.js file under the src folder and edit it as shown in the image:

Then, we change the directory to the app. Now, we install the packages that we鈥檒l be using in this tutorial.

The packages that we are going to install are react-router-dom and framer-motion.

To navigate across the pages, we’ll use the react-router-dom:

To animate the webpage, we use framer-motion:

Now we can start the application:

Inside the src folder, let’s create a folder called pages (you can name it anything you like). The pages folder should contain the below five files:

We will be using the Home.js, About.js, and Contact.js to show the transitions. We鈥檒l also embed them into the Navbar.js file. The AnimatedRoutes will contain all the routes to navigate between these pages.

Let鈥檚 create a folder inside our src folder called pages. Inside this folder, create a file Home.js with the following code:

Here, we created a sample homepage with some dummy content.

Let鈥檚 move on to build other components. Now, create a file named About.js:

Next, we create a file called Contact.js and paste this in:

Let’s also create our Navbar with:

In the above code:

Next, we create a file called AnimatedRoutes and paste this:

Here, we imported the Routes, Route, and useLocation from react-router-dom.

The next thing we want to do is go back to our previous pages and update them as shown:

Home.js

About.js

Contact.js

In the code above:

These are some of the extra props that we talked about earlier in the article.

The last thing we鈥檒l be doing is to return Navbar and AnimatedRoutes. In our App.js, paste this

Here, we imported our router. We鈥檒l return our navbar and AnimatedRoutes by wrapping them inside our Router as shown:

NOTE: We didn鈥檛 work on our index.js, we only edited it to look like this

Let鈥檚 now check out the webpage in the browser:

In this tutorial, we learned about framer motion as a tool for making page transitions in React. We learned how to make page transitions by building a simple project.

You can check out the source code here.

To learn more about framer-motion, it is suggested to go through their documentation.

Happy coding!

Peer Review Contributions by: Srishilesh P S